<template>
  <view>
    <!-- <u-popup v-model="showDetail" :custom-style="popupStyle" :mask="false" z-index='999999'> -->

    <!-- <view class="homepage-enter-view"> -->
    <view class="homepage-enter-view2">
      <u-icon @click="close" name="arrow-left" color="#ffffff" size="50"></u-icon>
    </view>
    <view class="homepage-enter-view">
      <u-icon @click="followAsset" v-if="!follow" name="heart" color="#ffffff" size="50">
      </u-icon>
      <u-icon @click="followAsset" v-else name="heart-fill" color="#ff0000" size="50"></u-icon>
    </view>
    <!-- </view> -->

    <view class="popup-page">
      <view class="usage-card"
        :style="{'background-color': usageColors[assetDetail.usage ? assetDetail.usage : 0].color}">
        {{usageColors[assetDetail.usage ? assetDetail.usage : 0].name}}
      </view>

      <u-swiper height="850" mode="number" :list="picList" :autoplay='false' indicator-pos="bottomRight"
        img-mode='scaleToFill' @click="imgListPreview"></u-swiper>
      <!--      <view class="popup-page-top">
        <u-image width="100%" height="100%" mode="scaleToFill" :src="topImg"></u-image>
      </view> -->
      <view class="popup-page-bottom">
        <view class="assetInfo">
          <view class="assetName">
            {{assetDetail.assetName}}
          </view>
          <view class="assetEmp">
            {{assetDetail.holdType === "个人持有" ? "持有人:" : ''}}{{assetDetail.belong}}
          </view>
          <view class="assetInfo-card">
            <view class="assetInfo-card-item">
              <view class="assetInfo-card-item-top">{{assetDetail.registerPrice}}</view>
              <view class="assetInfo-card-item-bottom">购入价格</view>
            </view>
            <view class="right-border"></view>
            <view class="assetInfo-card-item">
              <view class="assetInfo-card-item-top">{{assetDetail.fairPrice}}万</view>
              <view class="assetInfo-card-item-bottom">公允价格</view>
            </view>
            <view class="right-border"></view>
            <view class="assetInfo-card-item">
              <view class="assetInfo-card-item-top">{{assetDetail.fairPrice}}万</view>
              <view class="assetInfo-card-item-bottom">公允价格</view>
            </view>
            <view class="right-border"></view>
            <view class="assetInfo-card-item">
              <view class="assetInfo-card-item-top">
                {{assetDetail.profit ? `${assetDetail.profit}元` : '无'}}
              </view>
              <view class="assetInfo-card-item-bottom">收益</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height:15rpx;width: 100%;background-color: #fff;"></view>
    <view class="popup-page">
      <view class="popup-page-bottom">
        <view class="detail-text">
          资产详情
        </view>

        <view class="assetInfo-card-detail">
          <view class="foo">
            <view class="foo3">
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">所属公司:</view>
                <view class="assetInfo-card-item-detail-bottom">{{assetDetail.companyName}}</view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">登记日期:</view>
                <view class="assetInfo-card-item-detail-bottom">
                  {{assetDetail.registerDate ? assetDetail.registerDate.substring(0,10) : ''}}
                </view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">抵押日期:</view>
                <view class="assetInfo-card-item-detail-bottom"></view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">不动产类别:</view>
                <view class="assetInfo-card-item-detail-bottom">不动产</view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">审核日期:</view>
                <view class="assetInfo-card-item-detail-bottom">
                  {{assetDetail.registerDate ? assetDetail.registerDate.substring(0,10) : ''}}
                </view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">抵押到期日:</view>
                <view class="assetInfo-card-item-detail-bottom"></view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">持有类型:</view>
                <view class="assetInfo-card-item-detail-bottom">{{assetDetail.holdType}}</view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">证件状态:</view>
                <view class="assetInfo-card-item-detail-bottom">{{assetDetail.certificateStatus}}</view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">处置类型:</view>
                <view class="assetInfo-card-item-detail-bottom"></view>
              </view>
              <view class="assetInfo-card-detail-item">
                <view class="assetInfo-card-item-detail-top">面积(㎡):</view>
                <view class="assetInfo-card-item-detail-bottom">{{assetDetail.plane}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-text" style="padding-left: 64rpx;">
      同区域价值对比
    </view>
    <!-- #ifdef APP-PLUS || H5 -->
    <view class="content echarts" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"
      id="echarts5"></view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view>非 APP、H5 环境不支持</view>
    <!-- #endif -->
    <!-- </u-popup> -->
  </view>
</template>

<script>
  import echarts from '../../../../../static/common/js/echarts.min.js'
  export default {
    data() {
      return {
        assetDetail: {},
        showDetail: false,
        option: {
          grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            containLabel: true
          },
          legend: {
            itemWidth: 20,
            itemHeight: 8,
            orient: 'horizontal',
            data: ['收益趋势'],
            // x: 0,
            top: 10,
            right: 40,
            textStyle: {
              color: "#000"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          xAxis: [{
            type: 'category',
            axisTick: { // X轴线 刻度线 
              show: true,
              length: 5,
              lineStyle: {
                color: '#cccccc',
                type: 'solid',
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#cccccc'
              }
            },
            axisLabel: {
              color: '#cccccc'
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: [],
          }],

          yAxis: [{
            type: 'value',
            interval: 20,
            max: 180,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#cccccc'
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#ccc'
            },
            axisTick: {
              show: false,
            },
          }],
          series: [{
            name: '收益趋势',
            type: 'line',
            smooth: false, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .1)',
              },
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#00ca95',
              }
            },
            itemStyle: {
              color: "#00ca95",
              borderColor: "#00ca95",
              borderWidth: 4,
              shadowColor: 'rgba(0, 0, 0, .3)',
            },
            tooltip: {
              show: true
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ], false),
                shadowColor: 'rgba(0,202,149, 0.9)',
                shadowBlur: 20
              }
            },
            data: []
          }, ]
        },
        popupStyle: {
          width: '100%',
          height: '100%',
        },
        topImg: '../../../../../static/img/property/asset_empty2.png',
        usageColors: [{
            name: '使用中',
            color: '#2E88F3'
          },
          {
            name: '闲置中',
            color: '#FF6851'
          },
          {
            name: '已出租',
            color: '#00C377'
          },
          {
            name: '已售卖',
            color: '#999999'
          },
          {
            name: '已抵押',
            color: '#FF7600'
          }
        ],
        typeColor: '',
        follow: false,
        picList: []
      }
    },
    onLoad(e) {
      this.initData(e.assetId)
    },
    methods: {
      close() {
        uni.navigateBack()
      },
      initData(assetId) {
        this.showDetail = true
        let _query = {
          assetId: assetId
        }
        this.$u.api.getMobileAssetInfo(_query).then(res => {
          if (!res) {
            return
          }
          this.follow = res.attention == 0 ? false : true
          this.assetDetail = res

          if (res.assetChartData) {
            let _xAxisData = []
            let _serData = []
            for (let i = 0; i < res.assetChartData.length; i++) {
              _xAxisData.push(res.assetChartData[i].name)
              _serData.push(res.assetChartData[i].value)
            }
            this.option.xAxis[0].data = _xAxisData
            this.option.series[0].data = _serData
          }
          if (res.pics.length > 0) {
            for (let i = 0; i < res.pics.length; i++) {
              let _url = this.$u.http.config.baseUrl + res.pics[i]
              this.picList.push(_url)
            }
          }
          else {
            this.picList.push(this.topImg)
          }

        }).catch(err => {
          console.error(err)
        })
      },
      followAsset() {
        this.$u.api.setAttention({
          assetId: this.assetDetail.assetId,
          type: this.follow ? '0' : '1'
        }).then(res => {
          this.follow = !this.follow
        }).catch(err => {
          console.error(err)
        })
      },
      //预览图片
      imgListPreview(index) {
        uni.previewImage({
          indicator: "number",
          loop: true,
          urls: this.picList,
          current:index
        })
      },
    }
  }
</script>

<script module="echarts" lang="renderjs">
  let myChart
  export default {
    data() {
      return {
        opntions: [],
      }
    },
    mounted() {
      if (typeof window.echarts === 'function') {
        this.initEcharts()
      } else {
        // 动态引入较大类库避免影响页面展示
        const script = document.createElement('script')
        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
        script.src = 'static/common/js/echarts.min.js'
        this.opntions = this.option
        this.$nextTick(() => {
          script.onload = this.initEcharts.bind(this)
          document.head.appendChild(script)
        })
      }
    },
    methods: {
      initEcharts() {
        myChart = echarts.init(document.getElementById('echarts5'))
        // myChart.setOption(this.opntions)

        // echarts的点击事件
        // myChart.on('click', async params => {
        //   // 把点击事件的数据缓存下来
        //   this.clickData = params;
        //   await this.$ownerInstance.callMethod('onViewClick', {
        //     value: this.clickData.data,
        //     name: this.clickData.name,
        //     seriesName: this.clickData.seriesName
        //   })
        //   //  // 上次点击数据置空
        //   this.clickData = null;
        // })
      },
      updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        setTimeout(myChart.setOption(newValue), 500)
      },
      onClick(event, ownerInstance) {
        // 调用 service 层的方法
        // ownerInstance.callMethod('onViewClick', {
        // 	test: 'test'
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .echarts {
    background-color: #f5f5f5;
    padding-top: 10rpx;
    width: 100%;
    height: 900rpx;
  }

  .homepage-enter-view {
    width: 210rpx;
    height: 70rpx;
    position: fixed;
    right: 0;
    top: calc(constant(safe-area-inset-top) + 20px);
    top: calc(env(safe-area-inset-top) + 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 30rpx;
    z-index: 1000;
  }

  .homepage-enter-view2 {
    width: 210rpx;
    height: 70rpx;
    position: fixed;
    left: 0;
    top: calc(constant(safe-area-inset-top) + 20px);
    top: calc(env(safe-area-inset-top) + 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 30rpx;
    z-index: 1000;
  }

  .detail-text {
    background-color: #f5f5f5;
    padding: 53rpx 0 25rpx 0;
    font-size: 40rpx;
    font-weight: bold;
    color: #333333;
  }

  .popup-page {
    position: relative;
    background-color: #f5f5f5;

    .usage-card {
      padding: 16rpx 0;
      color: white;
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
      width: 240rpx;
      height: 87rpx;
      position: absolute;
      top: 188rpx;
      right: 0;
      z-index: 99;
      border-radius: 120rpx 0 0 120rpx;
    }

    .top-btn {
      width: 100%;
      position: absolute;
      top: 80rpx;
      z-index: 9;

      .top-btn-left {
        width: 200rpx;
        margin-left: 53rpx;
        float: left;

      }

      .top-btn-right {
        text-align: right;
        width: 200rpx;
        margin-right: 53rpx;
        float: right;
      }
    }

    .popup-page-top {
      height: 850rpx;
      width: 100%;
    }



    .popup-page-bottom {
      width: 100%;
      padding: 40rpx 64rpx;

      .assetInfo {
        .assetName {
          margin-top: 10rpx;
          font-size: 60rpx;
          font-weight: 500;
          color: #252631;
        }

        .assetEmp {
          margin-top: 14rpx;
          font-size: 36rpx;
          font-weight: 400;
          color: #333333;
        }

        .assetInfo-card {
          margin: 40rpx 200rpx 60rpx 0;
          display: flex;
          justify-content: space-between;

          .right-border {
            width: 2rpx;
            border-right: 1px solid #E8E8E8;
          }

          .assetInfo-card-item {

            .assetInfo-card-item-top {
              font-size: 60rpx;
              font-weight: 500;
              color: #EE573F;
            }

            .assetInfo-card-item-bottom {
              font-size: 30rpx;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
    }

    .assetInfo-card-detail {
      display: flex;
      margin: 20rpx 0 20rpx 0;

      .foo,
      .foo3 {
        display: flex;
      }

      .foo {
        flex: 1;
      }

      .foo3 {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
      }


      .assetInfo-card-detail-item {
        margin-top: 24rpx;
        width: 33%;
        display: flex;

        .assetInfo-card-item-detail-top {
          width: 170rpx;
          font-size: 30rpx;
          color: #999999;
        }

        .assetInfo-card-item-detail-bottom {
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
</style>
